<template>
    <div class="publishFrom_ box">
        <img v-if="selectFileOrNot" :src="previewImgURL" class="avatar">
        <div class="imgurl">
            <i class="image"></i>
            <p> 点击上传图片</p>
            <p>支持jpg/png/jpeg格式</p>
        </div>
        <uploader :options="uploadOptions" :autoStart="true" ref="uploader" :file-status-text="statusText" @files-submitted="fileSubmit" @file-removed="fileRemoved" @file-success="fileSuccess" @file-error="fileFail" class="uploader-broadcast">
            <uploader-unsupport></uploader-unsupport>
            <uploader-btn :directory="false" :attrs="attrs" :single="true">
                <i></i>
            </uploader-btn>
        </uploader>
    </div>
</template>
<script>
export default {
    name: "",
    data() {
        return {
            statusText: {
                success: "上传成功",
                error: "上传出错",
                uploading: "正在上传...",
                paused: "暂停",
                waiting: "等待上传"
            },
            selectFileOrNot: false, //是否选中文件
            uploadOrNot: false, //是否已经上传
            uploadInfo: {
                file_name: "",
                file_path: "",
                file_size: 0
            },
            attrs: {
                accept: ["image/*"]
            },
            uploadOptions: {
                target: this.BASE_URL + "/api/resource/res_upload",
                testChunks: false,
                headers: { Authorization: `Bearer ` + this.$g.access_token }
            },
            selectFileShow: true, //是否显示选择文件按钮
            uploadRetryTimes: 100, //文件最大重传次数
            previewImgURL: ""
        };
    },
    created() {},
    methods: {
        //上传成功的事件
        fileSuccess(rootFile, file, message, chunk) {
            var mess = eval("(" + message + ")");
             mess = handleResponseData(mess);
            if (parseInt(mess.data.status) === 1) {
                this.uploadOrNot = true;
                this.uploadInfo.file_name = mess.data.file_name;
                this.uploadInfo.file_path = mess.data.file_path;
                this.uploadInfo.post_fix = mess.data.post_fix;
                this.$emit("picture", this.uploadInfo.file_path);
                console.log(this.uploadInfo.file_path);
            }
        },
        fileFail(rootFile, file, message, chunk) {
            var mess = eval("(" + message + ")");
            if (parseInt(mess.error) === 401 && this.uploadRetryTimes > 0) {
                let callbcak = data => {
                    this.uploadRetryTimes--;
                    this.$refs.uploader.uploader.retry(file);
                };
                this.get_access_token(callbcak);
            } else {
                this.$message.error(mess.msg);
            }
        },
        //过滤文件格式
        fileSubmit(files, fileList, event) {
            for (var i = 0; i < fileList.length; i++) {
                if (fileList[i].fileType.indexOf("image/") === -1) {
                    this.$message.warning("只允许上传图片格式的文件");
                    this.$refs.uploader.uploader.removeFile(fileList[i]);
                } else if (fileList[i].size > 10240000) {
                    this.$message.warning("只允许上传10M以内的文件");
                    this.$refs.uploader.uploader.removeFile(fileList[i]);
                } else {
                    if (this.$refs.uploader.uploader.fileList.length > 1) {
                        //删除第一张图片
                        this.$refs.uploader.uploader.removeFile(
                            this.$refs.uploader.uploader.fileList[0]
                        );
                    }
                    this.previewImgURL = window.URL.createObjectURL(
                        fileList[i].file
                    );
                    // this.ruleForm.select_or_not = "1";
                    this.uploadInfo.file_size = fileList[i].size;
                    this.selectFileOrNot = true;
                    this.selectFileShow = false;
                }
            }
        },
        fileRemoved(file) {
            // this.ruleForm.select_or_not = "";
            this.selectFileOrNot = false;
            this.selectFileShow = true;
        },
        fileUpload() {
            this.$refs.uploader.uploader.upload();
        }
    }
};
</script>

<style lang="scss">
//封面图片
.publishFrom_ {
    width: 450px;
    height: 254px;
    border: 1px solid #e0e0e0;
    position: relative;
    overflow: hidden;
    > img {
        width: 100%;
        height: 100%;
    }
    .uploader {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
    }
    .uploader-btn {
        border: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        padding: 0;
        text-align: center;
        visibility: hidden;
        opacity: 0;
        > i {
            width: 80px;
            height: 60px;
            background: url(./../../../../public/images/ipm.png) -350px -90px;
            background-repeat: no-repeat;
            display: inline-block;
            margin-top: 97px;
        }
    }
    &:hover {
        .uploader-btn {
            visibility: visible;
            opacity: 1;
        }
        .avatar,
        .imgurl {
            opacity: 0.2;
        }
    }
    .imgurl {
        width: 100%;
        height: 100%;
        text-align: center;
        .image {
            display: inline-block;
            width: 110px;
            height: 72px;
            background-image: url("../../../assets/images/ipng.png");
            background-position: 0px -550px;
            background-repeat: no-repeat;
            margin-top: 10%;
            vertical-align: top;
        }
        p:nth-of-type(1) {
            font-size: 18px;
            margin: 3% 0 -2%;
        }
        p:nth-of-type(2) {
            font-size: 12px;
            color: #999999;
        }
    }
}
</style>

